<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div id="box">
		<select name="" id="sel1"></select>
		<select name="" id="sel2"></select>
		<select name="" id="sel3"></select>
	</div>
	<script src = 'area.js'></script>
	<script>
		function Check(id){
			this.box = document.getElementById(id);
			this. sel1 = this.box.getElementsByTagName('select')[0];
			this. sel2 = this.box.getElementsByTagName('select')[1];
			this. sel2 = this.box.getElementsByTagName('select')[2];
		}
		Check.prototype.init = function(){
			var html = '<option value="请选择">请选择省份</option>';
			for(var i = 0 ;i<area.length;i++){
				html+='<option value="'+area[i].name+'">'+area[i].name+'</option>';
			}
			sel1.innerHTML = html;
			this.chack();
		}
		Check.prototype.chack = function(){
			sel1.onchange = function() {
				var html = '<option value="请选择">请选择市</option>';
				for(var i = 0 ;i<area.length;i++){
					if(this.value == area[i].name){
						for(var j=0;j<area[i].city.length;j++){
							html+='<option value="'+area[i].city[j].name+'">'+area[i].city[j].name+'</option>';
						}
						sel2.innerHTML = html;
						break;
					}
				}
				sel3.innerHTML = '<option value="请选择">请选择区</option>';
			}
			sel2.onchange = function() {
				var html = '<option value="请选择">请选择区</option>';
				for(var i = 0 ;i<area.length;i++){
					for(var j=0;j<area[i].city.length;j++){
						if(this.value == area[i].city[j].name){
							for(var z=0;z<area[i].city[j].area.length;z++){
								html+='<option value="'+area[i].city[j].area[z]+'">'+area[i].city[j].area[z]+'</option>';
							}
						}
						sel3.innerHTML = html;
						break;
					}
				}
			}
		}
		var city = new Check('box');
		city.init();
	</script>
</body>
</html>